<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="form" :model="searchData" :inline="true" label-width="80px" size="mini"  style="margin-left: 20px; margin-top: 12px">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="起始日期">
              <el-date-picker
                v-model="searchData.dayTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="searchData.dayEndTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions2">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item >
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
              <el-button size="mini" @click="reset">清 空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        height="900"
        style="width: 100%"
        :header-cell-style="{height:'30px',padding:'0px',fontSize:'14px'}"
        :row-style="{height:'20px'}"
        :cell-style="{padding:'2px'}"
        show-summary :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="ledger_AREA"
          label="作业区"
          sortable
          header-align="center"
          align="center"
        />
<!--        <el-table-column label="正常计划" header-align="center" align="center">-->
          <el-table-column prop="ledger_WELL_NAME" label="井号" header-align="center" align="center">

<!--            <template slot-scope="props">-->
<!--              <el-link v-if="props.row.plan_state === 0" type="primary" @click="modify(props.row)" :underline="false">{{props.row.ledger_WELL_NAME}}</el-link>-->
<!--              <el-link v-else type="danger" @click="modify(props.row)" :underline="false">{{props.row.ledger_WELL_NAME}}</el-link>-->
<!--            </template>-->
          </el-table-column>
<!--        <el-table-column prop="plan_STATE" label="是否设计" header-align="center" align="center">-->
<!--              <template slot-scope="props">-->
<!--                <el-link v-if="props.row.plan_STATE === 0" type="primary" @click="modify(props.row)" :underline="false">已设计</el-link>-->
<!--                <el-link v-else type="danger" @click="modify(props.row)" :underline="false">未设计</el-link>-->
<!--              </template>-->
<!--        </el-table-column>-->
          <el-table-column
            prop="ledger_HOTWASH_AMOUNT"
            label="用液量（m3）"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="ledger_DOSAGE_AMOUNT"
            label="用药量（m3）"
            header-align="center"
            align="center"
          />
<!--        </el-table-column>-->
<!--        <el-table-column label="异常井计划" header-align="center" align="center">-->
<!--          <el-table-column-->
<!--            prop=""-->
<!--            label="热洗井号"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop=""-->
<!--            label="用液量（m3）"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop=""-->
<!--            label="加药井号"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop=""-->
<!--            label="用量（m3）"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--          />-->
<!--        </el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dayPlan',
  data() {
    return {
      searchData: {
        dayTime:"",
        dayEndTime:""
      },
      tableData: [],
      pickerOptions1: { //结束时间不能大于开始时间
        disabledDate: (time) => {
          if (this.searchData.dayEndTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.searchData.dayEndTime).getTime()
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.searchData.dayTime) {
            const two = 2*3600*24*1000
            const minTime = new Date(this.searchData.dayTime).getTime()
            const maxTime =new Date(this.searchData.dayTime).getTime() + two
            return (
              time.getTime()< minTime ||time.getTime() > maxTime
              // time.getTime() < new Date((this.searchData.startTime).getTime()+60*60*24*7*1000)
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      }
    }
  },
  created() {
    this.getListPage(this.searchData)
  },
  methods: {
    getListPage(data) {
      this.$http.post('/tAntiwaxLedger/queryDayPlan', data).then(({ data: { data: res }}) => {
        this.tableData = res
      }).catch(err => {
        this.$message.error(err)
      })
    },
    search() {
      this.getListPage(this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    modify(data) {
      this.form = data
      this.dialogUpdateFormVisible = true
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index == 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index == 4) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              let num = Number(prev) + Number(curr)
              return num.toFixed(3)
            } else {
              return Number(prev).toFixed(3)
            }
          }, 0)
        } else if(index == 3 ){
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              let num = Number(prev) + Number(curr)
              return num
            } else {
              return prev
            }
          }, 0)
        }else {
          sums[index] = '--'
        }
      })
      return sums
     }
  }
}
</script>

<style scoped>

</style>
